<template>
	<view class="educaList">
		<!-- 头部 -->
		<view class="homelife_head">
			<view v-for="(item,index) in headlist" :key="index" class="container_headbox" @click="Onhead(item)">
				<text :class="headindex == item.id?'head_titlea':'head_titleb'">{{item.name}}</text>
				<view v-if="headindex == item.id"></view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="shuttle">
			<uni-swiper-dot :info="bannerList" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
				<swiper class="shuttle_swiper" :autoplay="true" :interval="3000" :circular="true"
					@change="swiperChange">
					<swiper-item class="shuttle_swiper" v-for="(item, index) in bannerList" :key="index">
						<image @click="goNext('/pagesA/info/newsinfo?type=universal&id='+item.id, false)" class="shuttle_img" :src="item.video_img"></image>
						<view class="initial_volume font-ffffff font12 flex-row-center">{{item.initial_volume}}阅读</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 数据 -->
		<view class="educa">
			<block v-for="(item, index) in educaList" :key="index">
				<view class="brand-item flex-row-start" @click="goNext('/pagesA/info/newsinfo?type=universal&id='+item.id, false)">
					<view class="brand-info flex-column-between">
						<view class="font14">{{item.name}}</view>
						<view class="font12 font-969696">{{item.keyword}}</view>
						<view class="flex-row-between">
							<view class="font12 font-969696">{{item.initial_volume}}阅读</view>
							<view class="font12 font-969696">{{item.createtime}}</view>
						</view>
					</view>
					<view class="brand-logo bg-cover flex-row-center"
						:style="{backgroundImage: 'url(' + item.img + ')'}">
						<image v-if="item.is_video==1" src="../../static/home/video.png" mode=""></image>
					</view>
				</view>
			</block>
			<view v-if="!onReach" class="w100 tc font14 font-969696 margin-20">暂无更多数据！</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headlist: [], //分类
				bannerList: [], //轮播
				educaList: [], //数据
				headindex: null, //下标
				onReach: false, //加载
				//轮播参数
				bannerCurrent: 0,
				dotsStyles: {
					width: 3,
					height: 3,
					backgroundColor: 'rgba(51, 51, 51, .3)',
					border: '1px rgba(51, 51, 51, .3) solid',
					selectedBackgroundColor: '#6bcbb6',
					selectedBorder: '1px #6bcbb6 solid'
				},
				//分页数据
				httpobj: {
					page: 1,
					limit: 10,
					universal_type_id: null
				},
			}
		},
		onLoad() {
			//患教中心分类
			this.OnType()
			//轮播
			this.Onbanner()
		},
		// 触底加载
		onReachBottom() {
			if (this.onReach) {
				this.httpobj.page++
				this.Onuniversal()
			}
		},
		methods: {
			//患教中心分类
			OnType() {
				this.$Http({
					url: 'universalType',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						this.headlist = res.data
						this.headindex = res.data[0].id
						this.httpobj.universal_type_id = res.data[0].id
						this.Onuniversal()
					}
				});
			},
			//轮播
			Onbanner() {
				this.$Http({
					url: 'universal',
					data: {
						is_top: 1
					},
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							item.video_img = this.$store.state.http_img + item.video_img
						})
						this.bannerList = res.data.data
					}
				})
			},
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			//数据
			Onuniversal() {
				this.$Http({
					url: 'universal',
					data: this.httpobj,
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							item.img = this.$store.state.http_img + item.img
							item.createtime = this.$base.formatTime(new Date(item.createtime *
								1000), "yyyy/MM/dd")
						})
						this.educaList = this.educaList.concat(res.data.data)
						if (res.data.data.length == 0 || this.httpobj.page >= res.data.all_page) {
							this.onReach = false
						} else {
							this.onReach = true
						}

					}
				})
			},
			//切换
			Onhead(res) {
				this.headindex = res.id
				this.httpobj.universal_type_id = res.id
				this.httpobj.page = 1
				this.educaList = []
				this.Onuniversal()
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({
						url: url
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
